<template>
    <div class="page-content">
        <div class="comm-content" ref="box">种植面积</div>
    </div>
</template>

<script>
export default {
   data() {
      return {
      }
   },
   async mounted(){
        let box = this.$refs.box
        let myEcharts = this.$echarts.init(box)
        let dataList = await this.$http('/api/plantingAreaTop')
        dataList.data.sort(function(a,b){
            return a.area - b.area
        })
        let dataClass = dataList.data.map(item=>{
            return item.name
        })
        let dataArea = dataList.data.map(item=>{
            return item.area
        })
        console.log(dataList,dataClass,dataArea);
        let options = {
            title:{
                text:'各地区种植面积统计TOP10'
            },
            xAxis:{

            },
            yAxis:{
                data:dataClass
            },
            series:[{
                type:'bar',
                data:dataArea
            }]
        }
        myEcharts.setOption(options)
   }
}
</script>

<style>

</style>